<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  

  <title>Document</title>
 </head>
 <body>
  
<h3>문서객체모델DOM</h3>
<p>브라우저는 HTML 문서를 읽으면
내부적으로 문서객체모델을 생성함</p>

<p>문서객체모델은 html 태그와
텍스트를 객체화해서 계층적으로 표현한 것을 의미</p>

<p>자바스크립트와 DOM으로 
HTML 문서의 모든 요소를 다루거나
변경할 수 있게 해 줌</p>

<p>문서객체모델에는 core DOM,
XML DOM, HTML DOM 으로 분류</p>
<p>HTML DOM으로 html 문서의
모든 요소(태그)와 속성, 스타일을 
추가,변경,삭제할 수 있고, 
심지어 이벤트도 추가,삭제할 수 있음</p>

<hr />

<h3>DOM basic</h3>
<p>DOM에서 html의 모든 요소는 객체로 취급</p>
<p>요소를 선택하려면 document 객체에서 
제공하는 여러 메서드를 사용하면 됨</p>
<p>getElementById() : id 로 객체 선택</p>
<p>getElementsByTagName() : 태그명으로 객체선택</p>
<p>getElementsByClassName() : 클래스명으로 객체선택 (IE 8 이하는 지원x)</p>
<p>forms[] : 폼 요소로 객체 선택</p>
<p>images[] : 이미지 요소로 객체 선택</p>
<p>anchors[] : 링크 요소로 객체 선택</p>
<hr />
	<p id="find2id"></p>
	<button type="button" 
		onclick="findid();">id로찾기</button>
	<span></span>
	<button type="button"
		onclick="findtag()">태그로찾기</button>
	
	<form name="login">
		<input type="text" name="uid" /><br />
		<input type="password" name="pwd" />
		<button type="button"
			onclick="checklogin()">
			입력완료</button>
	</form>


<script type="text/javascript">
	function findid() {
		var find2id = 
			document.getElementById("find2id");
		find2id.innerHTML += "이글이 보이시나요?";
	}
	function findtag() {
		var span = 
		document.getElementsByTagName("span");
		span[0].innerHTML += "이글도 보이나요?";
	}
	function checklogin() {
		var frm = document.forms.login;
		if (frm.uid.value == "")
			alert("아이디를 입력하세요~");
		else if (frm.pwd.value == "")
			alert("비밀번호를 입력하세요~");
		else
			alert("입력한 정보는 " +
					frm.uid.value + "\n" + 
					frm.pwd.value);
	}
</script>

	<h3>DOM 출력제어</h3>
	<p>document.write() : html 출력스트림에 쓰기 
		(비추!) <br />  </p>
	<p>객체명.innerHTML : html 요소의 내용변경</p>
	<p>객체명.attribute : html 요소의 속성 변경</p>
	<p>객체명.style.attribute : html 요소의 스타일 변경</p>

	<img src="win2b.png" />
	<button type="button" onclick="chgimg()">
	그림바꾸기 </button>

	<h2>Welcome to HTML DOM!!</h2>
	<button type="button" onclick="chgh2()">
		스타일바꾸기 </button>

	<button type="button" onclick="modal()">
		모달창 만들기 </button>

	<script type="text/javascript">
		document.write(" 이글 또한 보이나요? ");
		function chgimg() {
			var img = 
			document.getElementsByTagName("img");
			img[0].src="suji01b.jpg";
		}
		function chgh2() { 
			var h2 = document
				.getElementsByTagName("h2");
			h2[0].style.color = "red";
			h2[0].style.fontStyle = "italic";
			h2[0].style.textDecoration = "underline";
		}
		function modal() {
			var shadow = 
			  document.getElementById("shadow");
			var popup = 
			  document.getElementById("popup");
			
			var d1 = document.documentElement;
			var d2 = document.body;
			var sx = Math.max( d2.clientWidth ,
					d1.offsetWidth, d2.offsetWidth ,
					d1.scrollWidth, d2.scrollWidth );
			var sy = Math.max( d2.clientHeight ,
					d1.offsetHeight , d2.offsetHeight ,
					d1.scrollHeight , d2.scrollHeight );

			// offsetWidth, offsetHeight
			// 화면에서 보여지는 영역 크기
			// MSIE의 DHTML Object Model

			// clientWidth, clientHeight
			// 화면에서 보여지는 영역에서 
			// 테두리만을 제외한 크기
			// MSIE의 DHTML Object Model

			// scrollWidth, scrollHeight
			// 화면에서 보여지는 스크롤 영역
			// MSIE의 DHTML Object Model

			shadow.style.width = sx +"px";
			shadow.style.height = sy + "px";
			shadow.style.top = 0;
			shadow.style.left = 0;
			shadow.style.background = "black";
			shadow.style.position = "absolute";
			shadow.style.opacity = "0.8";

			var cx = ( sx / 2) - 175;
			var cy = ( sy / 2) - 125;
			popup.style.width = "350px";
			popup.style.height = "250px";
			popup.style.top = cy +"px";
			popup.style.left = cx + "px";
			popup.style.background = "white";
			popup.style.position = "absolute";

			shadow.style.display = "block";
			popup.style.display = "block";
			
		}
		function cmodal() {
			var shadow = document.getElementById("shadow");
			var popup = document.getElementById("popup");
			shadow.style.display = "none";
			popup.style.display = "none";
		}


	</script>

	<div id="shadow" style="display:none;"></div>
	<div id="popup" style="display:none;">
		<button type="button" 
			onclick="cmodal()">닫기</button>
	</div>

 </body>
</html>
